<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="styles/dzbase.css" />
        <script type="text/javascript" src="scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="scripts/ext/ext-all.js">
        </script>
		
		<script type="text/javascript" src="scripts/menu/EditableItem.js"></script>
		<script type="text/javascript" src="scripts/menu/RangeMenu.js"></script>
		<script type="text/javascript" src="scripts/grid/GridFilters.js"></script>
		<script type="text/javascript" src="scripts/grid/filter/Filter.js"></script>
		<script type="text/javascript" src="scripts/grid/filter/StringFilter.js"></script>
		
        <script type="text/javascript" src="scripts/utils.js">
        </script>
		
        <script type="text/javascript">
        	var store;
            var grid;
            
            var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: 'ColorServlet?action=2&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                store.reload();
                                messageTip.msg('Tip', 'Delete item successfully');
                            }
                            else {
                                messageTip.msg('Tip', 'Delete item unsuccessfully');
                            }
                        },
                        failure: function(o){
                             messageTip.msg('Tip', 'Delete item failed');
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			 Ext.onReady(function(){
                // create the Data Store
                
                
                store = new Ext.data.Store({
                    // load using HTTP
                    url: 'ColorServlet?action=4',
                    
                    // the return will be XML, so lets set up a reader
                    reader: new Ext.data.XmlReader({
                        // records will have an "Item" tag
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ // set up the fields mapping into the xml doc
                    // The first needs mapping, the others are very basic
                    'index', 'number', 'comment', 'id']),
                    
                    remoteSort: true
                });
                
                store.setDefaultSort('id', 'desc');
				
				var filters = new Ext.grid.GridFilters({
					  filters:[
					    {type: 'string',  dataIndex: 'number'},
					    {type: 'string', dataIndex: 'comment'}
					]});
                
                // create the grid
                grid = new Ext.grid.GridPanel({
                    title: 'Color list',
                    store: store,
					stripeRows: true,
					plugins: filters,
                    height: 560,
                    columns: [{
                        header: 'ID',
                        width: 20,
                        dataIndex: 'index',
                        sortable: false
                    }, {
                        header: 'Number',
                        dataIndex: 'number',
                        sortable: true
                    },{
                        header: 'Comment',
                        dataIndex: 'comment',
                        sortable: true
                    }, {
                        header: 'Edit',
                        width: 20,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderEdit
                    },{
                        header: 'Delete',
                        width: 20,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderDelete
                    }],
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    renderTo: 'colorListDiv',
                    bbar: new Ext.PagingToolbar({
                        pageSize: 20,
                        store: store,
                        displayInfo: true
                    })
                });
                
                var startPage = getPrarmeterValue(window.location, 'startPage');
                var start;
                if (startPage == null || startPage == '') {
                    start = 0;
                }
                else {
                    start = (startPage - 1) * 20;
                }
                store.load({
                    params: {
                        start: start,
                        limit: 20
                    }
                });
                
                function renderEdit(value, p, record){
                    return String.format('<a href="color_edit.html?id={0}&startPage={1}" target="_self"><img src="images/icons/pencil.png" title="edit" /></a>', record.id, Math.floor((record.data.index - 1) / 20) + 1);
                }
                
                function renderDelete(value, p, record){
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="images/icons/delete.png" title="delete"/></a>', record.id);
                }
            });
                    
                    
        </script>
    </head>
    <body>
        <div id="colorListDiv">
        </div>
    </body>
</html>
